<template>
    <div
        class="toast"
        v-show="show"
        :class="{
            'notify-show': state === 'active',
            'notify-close': state === 'close',
        }"
    >
        <div class="notify-wraper">
            <span class="title">{{ title }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "toast",

    data() {
        return {
            show: false,
            state: "none",
            title: "提示信息",
            duration: 3000
        };
    },
    methods: {
        showToast(option) {
            clearTimeout(this._timer);
            clearTimeout(this._timer2);
            if (typeof option === "string") {
                option = {
                    title: option
                };
            }
            this._loadOption(option);
            this.show = true;
            this.state = "active";

            this._timer = setTimeout(() => {
                this.closeNotify();
            }, this.duration);
        },
        closeNotify() {
            this.state = "close";
            this._timer2 = setTimeout(() => {
                this.show = false;
                this._resetOption();
            }, 400);
        },
        _loadOption({ title = "提示", duration = 3000, type = "success" }) {
            this.title = title;

            this.duration = duration;
        },
        _resetOption() {
            this.title = "提示";
            this.duration = 3000;
        }
    }
};
</script>

<style lang="less" scoped>
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 3000;
    border-radius: 8px;
    padding: 30px;

    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    .mask {
        position: fixed;
        background: transparent;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 3000;
    }

    .notify-wraper {
        width: 100%;
        height: 100%;
        z-index: 3000;
        box-sizing: border-box;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;

        .title {
            display: inline-block;
            height: 100%;
            font-size: 30px;
        }
    }
}
.notify-show {
    animation: show 0.4s;
}
.notify-close {
    animation: close 0.8s;
}
@keyframes show {
}
@keyframes close {
}
</style>